<script setup>
import { ref } from 'vue'
import HomeCard from './components/HomeCard.vue'
import PaperCard from '@/components/PaperCard.vue'
import { getCarouselListAPI } from '@/api/home.js'
import { readMesAPI } from '@/api/message.js'
import { useStuStore, useOptionStore, usePaperStore } from '@/stores'
import { formatDate } from '@/utils/format.js'

const activeName = ref('')
const mesActice = ref('')
const stuStore = useStuStore()
const paperStore = usePaperStore()
const optionStore = useOptionStore()
paperStore.getPaperList({
  id: localStorage.getItem('uid'),
  subjectId: '',
  paperType: '',
  keyword: '',
  pageSize: 8,
  pageIndex: 1
})

// 轮播图
const carouselList = ref([])
const getCarouselList = async () => {
  const { data: res } = await getCarouselListAPI()
  if (res.status === 200) {
    carouselList.value = res.data
  }
}
getCarouselList()

// 用户消息
stuStore.getMesList()

// 阅读消息
const readMesItem = async (item) => {
  if (!item.readed) {
    const { data: res } = await readMesAPI(item.id)
    if (res.status === 200) {
      item.readed = 1
    }
  }
}

const scroll = () => {
  window.scrollTo({
    top: window.innerHeight - 60,
    behavior: 'smooth'
  })
}
</script>

<template>
  <el-carousel class="carousel-box" trigger="click">
    <el-carousel-item v-for="item in carouselList" :key="item.id">
      <el-image :src="item.url" fit="cover" />
    </el-carousel-item>
    <button
      class="carousel-btn"
      :style="{ color: optionStore.themeSwitch ? '#f5f5f5' : '#3d3d3d' }"
      @click="scroll"
    >
      开始
    </button>
  </el-carousel>
  <div class="notice-card-box">
    <HomeCard class="notice-card" header="任务中心">
      <template #body>
        <el-scrollbar max-height="3rem" class="collapse-box" v-if="false">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="任务" name="1">
              <div class="collapse-item-div">
                <span>任务1</span>
                <div>
                  <el-tag style="margin-right: 0.1rem">tag</el-tag>
                  <el-button>去批改</el-button>
                </div>
              </div>
              <div class="collapse-item-div">任务2</div>
            </el-collapse-item>
            <el-collapse-item title="任务" name="2">
              <div class="collapse-item-div">
                <span>任务1</span>
                <div>
                  <el-tag style="margin-right: 0.1rem">tag</el-tag>
                  <el-button>去批改</el-button>
                </div>
              </div>
              <div class="collapse-item-div">任务2</div>
            </el-collapse-item>
            <el-collapse-item title="任务" name="3">
              <div class="collapse-item-div">
                <span>任务1</span>
                <div>
                  <el-tag style="margin-right: 0.1rem">tag</el-tag>
                  <el-button>去批改</el-button>
                </div>
              </div>
              <div class="collapse-item-div">任务2</div>
            </el-collapse-item>
            <el-collapse-item title="任务" name="4">
              <div class="collapse-item-div">
                <span>任务1</span>
                <div>
                  <el-tag style="margin-right: 0.1rem">tag</el-tag>
                  <el-button>去批改</el-button>
                </div>
              </div>
              <div class="collapse-item-div">任务2</div>
            </el-collapse-item>
            <el-collapse-item title="任务" name="5">
              <div class="collapse-item-div">
                <span>任务1</span>
                <div>
                  <el-tag style="margin-right: 0.1rem">tag</el-tag>
                  <el-button>去批改</el-button>
                </div>
              </div>
              <div class="collapse-item-div">任务2</div>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
        <el-empty v-else description="暂无消息" />
      </template>
    </HomeCard>
    <HomeCard class="notice-card" header="消息中心">
      <template #body>
        <el-scrollbar class="collapse-box">
          <el-collapse
            v-model="mesActice"
            accordion
            v-if="stuStore.mesList.length"
          >
            <el-collapse-item
              :name="item.id"
              v-for="item in stuStore.mesList"
              :key="item.id"
              @click="readMesItem(item)"
            >
              <template #title>
                <span class="collapse-title-text">{{
                  item.message_id.title
                }}</span>
                <el-tag
                  class="collapse-title-tag"
                  :type="item.readed ? 'success' : 'warning'"
                  >{{ item.readed ? '已读' : '未读' }}</el-tag
                >
              </template>
              <div class="collapse-item-div">
                <div class="collapse-item-content">
                  {{ item.message_id.content }}
                </div>
                <div class="collapse-item-mes">
                  <span>
                    <label>发送人：</label>
                    <el-tag>{{ item.message_id.send_real_name }}</el-tag>
                  </span>
                  <span>
                    <label>发送时间：</label>
                    <el-tag>
                      {{ formatDate(item.create_time, 'YYYY-MM-DD') }}
                    </el-tag>
                  </span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

          <el-empty v-else description="暂无消息" />
        </el-scrollbar>
      </template>
    </HomeCard>
  </div>
  <div class="exam-card-box">
    <HomeCard header="试卷中心" more>
      <template #body>
        <div class="exam-card" v-if="paperStore.paperTotal">
          <PaperCard
            class="exam-card-item"
            v-for="item in paperStore.paperList"
            :key="item.id"
            :data="item"
          ></PaperCard>
        </div>
        <el-empty v-else description="暂无试卷" />
      </template>
    </HomeCard>
  </div>
</template>

<style scoped lang="scss">
@media screen and (max-width: 480px) {
  .carousel-box {
    position: relative;
    height: 4rem !important;
    .carousel-btn {
      display: none;
    }
  }
  .notice-card-box {
    flex-direction: column;
    .collapse-box {
      height: 5rem !important;
      .collapse-item-div {
        .collapse-item-content {
          font-size: 0.16rem;
        }
        .collapse-item-mes {
          span {
            font-size: 0.16rem;
            label {
              width: 1.2rem !important;
              font-size: 0.16rem;
            }
          }
        }
      }
    }
  }
  .exam-card-box {
    .exam-card {
      .exam-card-item {
        width: calc((100% - 0.4rem) / 2) !important;
      }
    }
  }
}
.carousel-box {
  :deep(.el-carousel__container) {
    height: 100%;
  }
  :deep(.el-carousel__indicators) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  position: relative;
  height: calc(100vh - 0.6rem);
  .carousel-btn {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 14%;
    border: 0.01rem solid #ccc;
    padding: 0.1rem;
    width: 1.2rem;
    font-size: 0.16rem;
    border-radius: 0.24rem;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.3s;
    &:hover {
      background-color: #42a1ffb3;
      border-color: #42a1ffb3;
      color: #fff !important;
    }
  }
}

.notice-card-box {
  padding: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .notice-card {
    flex: 1;
  }
  .collapse-box {
    height: 3rem;
    .el-collapse {
      border-top: 0;
      .el-collapse-item {
        position: relative;
        .collapse-title-text {
          font-size: 0.16rem;
        }
        .collapse-title-tag {
          position: absolute;
          right: 0.5rem;
          font-size: 0.12rem;
        }
      }
    }
    .collapse-item-div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.1rem 0.2rem;
      border-bottom: 0.01rem solid #f3f3f3;
      .collapse-item-content {
        flex: 2;
      }
      .collapse-item-mes {
        display: flex;
        flex-direction: column;
        span {
          display: flex;
          &:nth-child(1) {
            margin-bottom: 0.1rem;
          }
          label {
            display: block;
            width: 0.8rem;
            text-align: right;
          }
        }
      }
    }
  }
}
.exam-card-box {
  padding: 0 0.2rem;
  .exam-card {
    display: flex;
    flex-wrap: wrap;
    .exam-card-item {
      width: calc((100% - 0.8rem) / 4);
      min-height: 2.6rem;
      margin: 0 0.1rem 0.2rem;
    }
  }
}
</style>
